<template>
	<view :class="classLine" :style="styleLine"></view>
</template>


<script>
	/**
	 * 间隔线条
	 * @description vue/nvue通用，基础类组件，用于分隔内容块，可横向和竖向
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-line
	 * @property {String} mode = [solid|dashed|dotted] 线条类型，默认：solid
	 *   @value solid 实线
	 *   @value dashed 方形虚线
	 *   @value dotted 圆点虚线
	 * @property {String} direction = [row|col] 线条方向，默认：row
	 *   @value row 横向
	 *   @value col 竖向
	 * @property {String,Number} length 线条长度(rpx)
	 * @property {String,Number,Array} margin 外边距(rpx)，数组形式，写法：[24]/[12,24]/[12,0,12,24]
	 * @property {String} color = [black|white|primary|success|warning|error|info|primary-light|success-light|warning-light|error-light|info-light] 内置的线条颜色，默认：info
	 *   @value black 黑色
	 *   @value white 白色
	 *   @value primary 基本主体色
	 *   @value success 完成色
	 *   @value warning 警告色
	 *   @value error 错误色
	 *   @value info 信息色
	 *   @value primary-light 基本主体色
	 *   @value success-light 完成色
	 *   @value warning-light 警告色
	 *   @value error-light 错误色
	 *   @value info-light 信息色
	 */
	export default {
		name: "focus-line",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-line' },
			"mode": { type: String, default: 'solid' },
			"direction": { type: String, default: 'row' },
			"length": { type: [String,Number], default: null },
			"margin": { type: [String,Number,Array], default: null },
			"color": { type: String, default: 'info' },
		},
		
		// 计算属性
		computed: {
			// 线条class属性
			classLine() {
				// 初始化
				var arr_class = [];
				var str_class = '';
				
				// 内置的线条颜色
				if (this.color.length > 0)
				{
					// 背景颜色 名称组合
					arr_class.push('_focus-borderColor-' + this.color);
				}
				
				// 循环样式对象
				for (let k in arr_class) { str_class += arr_class[k] + ' '; }
				// 结果返回
				return str_class;
			},
			// 线条style属性
			styleLine() {
				// 初始化
				var obj_style = {};
				var str_style = '';
				
				// ======================================= 线条类型
				if (this.mode == 'dashed') { obj_style['border-style'] = 'dashed'; }
				else if (this.mode == 'dotted') { obj_style['border-style'] = 'dotted'; }
				else { obj_style['border-style'] = 'solid'; }
				
				// ======================================= 线条方向
				// 竖向
				if (this.direction == 'col') {
					obj_style['width'] = '0rpx';
					obj_style['border-left-width'] = '1px'; obj_style['border-right-width'] = '0';
					obj_style['border-top-width'] = '0'; obj_style['border-bottom-width'] = '0';
					// ======================================= 线条长度
					if (this.length != null && Number(this.length) >= 0) { obj_style['height'] = this.length + 'rpx'; }
				}
				// 横向
				else {
					obj_style['height'] = '0rpx';
					obj_style['border-left-width'] = '0'; obj_style['border-right-width'] = '0';
					obj_style['border-top-width'] = '1px'; obj_style['border-bottom-width'] = '0';
					// ======================================= 线条长度
					if (this.length != null && Number(this.length) >= 0) { obj_style['width'] = this.length + 'rpx'; }
				}
				
				// ======================================= 容器外边距
				// 传入的是 string 和 number 的情况
				if ( (typeof(this.margin)=="string" || typeof(this.margin)=="number") && this.margin)
				{
					obj_style['margin'] = this.margin + 'rpx';
				}
				// 传入的是 array 的情况
				else if (typeof(this.margin)=="object" && this.margin && this.margin.length)
				{
					// 只有一个元素
					if (this.margin.length == 1)
					{
						obj_style['margin'] = this.margin[0] + 'rpx';
					}
					// 有2个元素
					else if (this.margin.length == 2)
					{
						obj_style['margin-top'] = this.margin[0] + 'rpx';
						obj_style['margin-right'] = this.margin[1] + 'rpx';
						obj_style['margin-bottom'] = this.margin[0] + 'rpx';
						obj_style['margin-left'] = this.margin[1] + 'rpx';
					}
					// 有4个元素及以上
					else if (this.margin.length >= 4)
					{
						obj_style['margin-top'] = this.margin[0] + 'rpx';
						obj_style['margin-right'] = this.margin[1] + 'rpx';
						obj_style['margin-bottom'] = this.margin[2] + 'rpx';
						obj_style['margin-left'] = this.margin[3] + 'rpx';
					}
				}
				
				// 循环样式对象
				for (let k in obj_style) { str_style += k + ':' + obj_style[k] + ';'; }
				// 结果返回
				return str_style;
			}
		},
		
	}
</script>


<style lang="scss">
	// 边框颜色文件
	@import "../../lib/css/style-border.scss";
</style>